<template>
  <!-- 菌落形态 -->
  <div id="colonialMorphologys">
    <Breadcrumb content="菌落形态"/>
    <div class="bodyContent">
      <Splitpanes class="area">
        <Pane size="30">
          <ColonialMorphology ref="colonialMorphologyRef" @getColonialMorphologyId="getColonialMorphologyId"/>
        </Pane>
        <Pane size="70">
          <ColonialMorphologyDetail ref="morphologyDetailRef" @setDetailName="setDetailName"/>
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>
<script setup lang='ts'>
import {getCurrentInstance, reactive, ref} from "vue";
import Breadcrumb from '@/components/Breadcrumb.vue';
import {Splitpanes, Pane} from 'splitpanes';
import ColonialMorphology from './ColonialMorphology.vue';
import ColonialMorphologyDetail from './ColonialMorphologyDetail.vue';

let {proxy}: any = getCurrentInstance();
let colonialMorphologyRef: any = ref(null); //菌落形态
let morphologyDetailRef: any = ref(null); //图片详情

let colonialMorphology = reactive({});//菌落形态id

function getColonialMorphologyId(id) {
  morphologyDetailRef.value.colonialMorphologyIdChange(id);

}

function setDetailName(val) {
  //colonialMorphologyRef.value.colonialMorphologyChange(val);
  colonialMorphology = val;
}

</script>
<style lang="scss" scoped>
#colonialMorphologys {
  height: 100%;
  .bodyContent {
    height: calc(100% - 40px - 20px);
    .area {
      background-color: $base-white;
    }
  }
}
</style>